Ionic 将Firebase集成到独立组件中

2023-04-06 00:31| 来源: 网络整理| 查看: 265

我需要清理它，但我正在使用：

import { InjectionToken, NgModule } from '@angular/core'; import { FirebaseApp, initializeApp, provideFirebaseApp, } from '@angular/fire/app'; import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth'; import { provideFirestore, getFirestore, connectFirestoreEmulator, initializeFirestore, } from '@angular/fire/firestore'; export interface IFirebaseConfig { apiKey: string; authDomain: string; projectId: string; locationId: string; storageBucket: string; messagingSenderId: string; appId: string; measurementId: string; } export const FIREBASE_CONFIG = new InjectionToken( 'FIREBASE_CONFIG', { providedIn: 'any', factory: () => { throw new Error(`Provide FIREBASE_CONFIG`); }, } ); export const USE_EMULATORS = new InjectionToken('USE_EMULATORS', { providedIn: 'any', factory: () => { throw new Error(`Provide USE_EMULATORS`); }, }); @NgModule({ declarations: [], imports: [ provideFirebaseApp((injector) => { const config = injector.get(FIREBASE_CONFIG); console.log('🔔 provideFirebaseApp'); return initializeApp(config); }), provideAuth((injector) => { console.log('🔔 provideAuth'); const app = injector.get(FirebaseApp); const auth = getAuth(app); if (injector.get(USE_EMULATORS)) { console.log('🔔 using auth emulator...'); connectAuthEmulator(auth, 'http://localhost:9099'); } return auth; }), provideFirestore((injector) => { console.log('🔔 provideFirestore'); let firestore; if (injector.get(USE_EMULATORS)) { console.log( `🔔 using firestore emulator...${ injector.get(FIREBASE_CONFIG).projectId }` ); // bug: experimentalAutoDetectLongPolling not picked up via `getFirestore` const app = injector.get(FirebaseApp); firestore = initializeFirestore(app, { experimentalAutoDetectLongPolling: true, }); connectFirestoreEmulator(firestore, 'localhost', 8080); } else { firestore = getFirestore(); } return firestore; }), ], }) export class FirebaseV7Module {}

然后在bootstrapApplication的提供程序中包含以下内容，如 provideFirebase（）：

importProvidersFrom( FirebaseV7Module )请注意，您也可以将提供程序添加到路由器，因此并非所有内容都必须转到根提供程序，但在这种情况下，这是有意义的。

在新的独立世界中，应用程序不是基于模块进行引导，而是基于main.ts中的组件进行引导：

import { enableProdMode } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { appConfig } from './app/app.config'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err));

appConfig与源代码中的app组件搭配：src/app/app.config.ts来自RealWorld Example App的示例：

export const appConfig: ApplicationConfig = { providers: [ { provide: ApiConfiguration, useValue: { rootUrl: environment.apiUrl } }, provideRouter( [ { path: '', loadComponent: () => import('./layout/layout.component'), loadChildren: () => import('./layout/layout.routes'), }, ], withHashLocation() ), provideHttpClient(withInterceptors([authInterceptor()])), ], };

【本文地址】

公司简介

联系我们